<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testDemo</title>
</head>
<script>
  // 点击放大按钮图片放大
  function zoom() {
    let img = document.getElementById("test");

    let width = img.width;  // 获取图片宽度
    let height = img.height;
    if (width <= 6912 ){ // 最大放大90%
        img.width = width + (width * 0.1);
        img.height = height + (height * 0.1 );
        ElementCenter();
    }else {
        alert("图片已最大了")
    }
  }
  // 点击缩小按钮图片缩小
  function zoomOut() {
    let img = document.getElementById("test");
    let width = img.width;
    let height = img.height;
    if (width >= 768){ // 最小缩小10%
        img.width = width - (width * 0.1);
        img.height = height - (height * 0.1 );
        ElementCenter();
    }else { // 否则提示
        alert("图片已最小了")
    }
  }
  // 居中方法
  function ElementCenter() {
      let element = document.getElementById("centerElement");
      let img = document.getElementById("test");
      let scrollbarWidth = img.clientWidth / 2;
      let scrollbarHeight = img.clientHeight / 2;
      element.scrollTo(scrollbarWidth, scrollbarHeight);
  }
  // 初始化
  window.onload = function() {
      ElementCenter()
  }

  // 全屏显示
  function IngaeMax() {
      // 获取图片元素的引用
      const myImage = document.getElementById('test');
      // 检查浏览器是否支持requestFullscreen方法，并调用该方法来使图片全屏显示
      if (myImage.requestFullscreen) {
          myImage.requestFullscreen(); // 标准方法，适用于大多数浏览器
      } else if (myImage.mozRequestFullScreen) {
          myImage.mozRequestFullScreen(); // Firefox
      } else if (myImage.webkitRequestFullscreen) {
          myImage.webkitRequestFullscreen(); // Chrome, Safari和Opera
      } else if (myImage.msRequestFullscreen) {
          myImage.msRequestFullscreen(); // Internet Explorer和Microsoft Edge
      }
  }
</script>
<body>
<div id="centerElement" style="width: 300px; height: 200px;border: 2px solid red; overflow: scroll">
  <img id="test" src="未标题-1.png">
</div>
<button onclick="zoom()">放大</button>
<button onclick="zoomOut()">缩小</button>
<button onclick="IngaeMax()">全屏</button>
</body>
</html>